<template>
  <div class="works-example">
    <h2>作品展示示例</h2>
    
    <!-- 基础用法 -->
    <div class="example-section">
      <h3>基础作品展示</h3>
      <WorksDisplay 
        :works="worksData" 
        :loading="isLoading"
        @work-click="handleWorkClick"
        @work-view="handleWorkView"
      />
    </div>

    <!-- 带分页的用法 -->
    <div class="example-section">
      <h3>带分页的作品展示</h3>
      <WorksDisplay 
        :works="worksData" 
        :loading="isLoading"
        :show-pagination="true"
        :total="total"
        :page-size="pageSize"
        :current-page="currentPage"
        @work-click="handleWorkClick"
        @work-view="handleWorkView"
        @page-change="handlePageChange"
        @page-size-change="handlePageSizeChange"
      />
    </div>

    <!-- 自定义操作按钮 -->
    <div class="example-section">
      <h3>自定义操作按钮</h3>
      <WorksDisplay 
        :works="worksData" 
        :loading="isLoading"
        @work-click="handleWorkClick"
      >
        <template #actions="{ work }">
          <a-button size="small" type="primary" @click.stop="handleEdit(work)">
            <EditOutlined /> 编辑
          </a-button>
          <a-button size="small" type="default" @click.stop="handleShare(work)">
            <ShareAltOutlined /> 分享
          </a-button>
          <a-button size="small" danger @click.stop="handleDelete(work)">
            <DeleteOutlined /> 删除
          </a-button>
        </template>
      </WorksDisplay>
    </div>

    <!-- 无操作按钮 -->
    <div class="example-section">
      <h3>无操作按钮（只读模式）</h3>
      <WorksDisplay 
        :works="worksData" 
        :loading="isLoading"
        :show-actions="false"
        @work-click="handleWorkClick"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { EditOutlined, ShareAltOutlined, DeleteOutlined } from '@ant-design/icons-vue'
import WorksDisplay from '@/components/common/WorksDisplay.vue'

// 作品数据（模拟你提到的API返回值）
const worksData = ref([
  {
    id: 15,
    userId: 4,
    worksName: "测试",
    coverFileUrl: "/pic/2025/08/15/cf70fabb61ea2b098c794339a399c009.jpg",
    description: "恶趣味去",
    tags: "3,2,1",
    isCharge: 0,
    price: 0.00,
    status: 3,
    fileMd5: "b691473f1a8a951fa020b35c3595017b",
    createTime: "2025-08-18 19:17:05",
    updateTime: "2025-08-19 14:54:21",
    deleted: 0
  },
  {
    id: 16,
    userId: 4,
    worksName: "示例作品2",
    coverFileUrl: "/pic/2025/08/15/example2.jpg",
    description: "这是一个示例作品描述",
    tags: "1,4",
    isCharge: 1,
    price: 9.99,
    status: 3,
    fileMd5: "example2md5",
    createTime: "2025-08-18 20:00:00",
    updateTime: "2025-08-19 15:00:00",
    deleted: 0
  },
  {
    id: 17,
    userId: 4,
    worksName: "草稿作品",
    coverFileUrl: "/pic/2025/08/15/draft.jpg",
    description: "这是一个草稿状态的作品",
    tags: "2,5",
    isCharge: 0,
    price: 0.00,
    status: 1,
    fileMd5: "draftmd5",
    createTime: "2025-08-18 21:00:00",
    updateTime: "2025-08-19 16:00:00",
    deleted: 0
  }
])

// 分页相关状态
const isLoading = ref(false)
const total = ref(100)
const pageSize = ref(10)
const currentPage = ref(1)

// 模拟加载数据
onMounted(() => {
  // 这里可以调用你的API获取作品数据
  // 例如：fetchWorksData()
})

// 作品点击事件
const handleWorkClick = (work: any) => {
  console.log('作品被点击:', work)
  message.info(`点击了作品: ${work.worksName}`)
}

// 查看作品事件
const handleWorkView = (work: any) => {
  console.log('查看作品:', work)
  message.info(`查看作品: ${work.worksName}`)
  // 这里可以打开作品详情弹窗或跳转到详情页
}

// 编辑作品
const handleEdit = (work: any) => {
  console.log('编辑作品:', work)
  message.info(`编辑作品: ${work.worksName}`)
  // 这里可以打开编辑弹窗
}

// 分享作品
const handleShare = (work: any) => {
  console.log('分享作品:', work)
  message.info(`分享作品: ${work.worksName}`)
  // 这里可以实现分享功能
}

// 删除作品
const handleDelete = (work: any) => {
  console.log('删除作品:', work)
  message.info(`删除作品: ${work.worksName}`)
  // 这里可以实现删除功能
}

// 分页变更
const handlePageChange = (page: number) => {
  currentPage.value = page
  console.log('页码变更:', page)
  // 这里可以重新请求数据
  // fetchWorksData(page)
}

// 每页条数变更
const handlePageSizeChange = (current: number, size: number) => {
  pageSize.value = size
  currentPage.value = 1
  console.log('每页条数变更:', size)
  // 这里可以重新请求数据
  // fetchWorksData(1, size)
}

// 模拟获取作品数据的函数
const fetchWorksData = async (page = 1, size = 10) => {
  isLoading.value = true
  try {
    // 这里调用你的API
    // const response = await getWorksList({ pageNum: page, pageSize: size })
    // if (response.code === '00000') {
    //   worksData.value = response.data.list || []
    //   total.value = response.data.total || 0
    // }
    
    // 模拟API调用延迟
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    // 模拟数据更新
    console.log(`获取第${page}页数据，每页${size}条`)
    
  } catch (error) {
    console.error('获取作品数据失败:', error)
    message.error('获取作品数据失败')
  } finally {
    isLoading.value = false
  }
}
</script>

<style scoped>
.works-example {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.example-section {
  margin-bottom: 40px;
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.example-section h3 {
  margin: 0 0 20px 0;
  color: #333;
  font-size: 18px;
  border-bottom: 2px solid #1890ff;
  padding-bottom: 10px;
}

h2 {
  color: #333;
  margin-bottom: 30px;
  text-align: center;
}
</style>
